<template>
	<view class="v1">
		<view class="set_bg">
			<view class="nav_head">
				<!-- <tab-search :bg="bg"></tab-search> -->
				<nav-gate :bg="bg" :list="topclass" @change="navGateTap($event)"></nav-gate>
			</view>
			<!-- <lea-flet v-show="val===1" :list="saleBanner"></lea-flet> -->
		</view>
		<view class="components" v-for="item in pageSort" :key="item">
			<menu-button v-if="item=='shopclass'" :list="shopclass"></menu-button>
			<!-- <limited-time v-else-if="item=='curskill'" :info="curskill"></limited-time> -->
			<sale-price v-else-if="item=='marketing'" :list="marketing"></sale-price>
			<hot-selling v-else-if="item=='hotsell'" :list="hotsell"></hot-selling>
			<shop-list ref="shopList" v-else-if="item=='brand'" :val="val" :list="flashSaleList" :bg="bg" @change="getFlashSale"></shop-list>
		</view>

	</view>
</template>

<script>
	import tabSearch from "@/home_page/components/tab_search.vue"
	import navGate from "@/home_page/components/nav_gate.vue"
	import leaFlet from "@/home_page/components/lea_flet.vue"
	import menuButton from "@/home_page/components/menu_button.vue" 
	import limitedTime from "@/home_page/components/limited_time.vue"
	import salePrice from "@/home_page/components/sale_price.vue"
	import hotSelling from "@/home_page/components/hot_selling.vue"
	import shopList from "@/home_page/components/shop_list.vue"
	export default {
		components: {
			tabSearch,
			navGate,
			leaFlet,
			menuButton,
			limitedTime,
			salePrice,
			hotSelling,
			shopList
		},
		name: "home_v1",
		data() {
			return {
				bg:'#8405dc',
				cid: '',
				topclass: [],
				pageSort: [],

				saleBanner: [],
				shopclass: [],
				curskill: {
					info: {
						pic: ''
					},
					goodsList0: [],
					isshow: 0
				},
				marketing: [],
				hotsell: [],
				isstop: false,
				type: '',
				page: 0,
				val: 1,
				brand: [],
				flashSaleList: []
			}
		},
		onShow(){this.$forceUpdate();},
		created(){
			this.getFlashSale(1);//秒杀
		},
		methods: {
			async init() {
				this.$axios('nhome/main', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						for (let i in data.orderby) {
							this.$set(this.pageSort, data.orderby[i] - 1, i);
						}
						// this.bg = data.attribute.backcolor;
					}
				})
				// this.getTopclass();
				// this.getSaleBanner();
				// this.getShopclass();
				// this.getCurskill();
				// this.getMarketing();
				// this.getHotsell();
				// if (this.pageSort.length > 0) {
				// 	this.$nextTick(() => {
				// 		this.loadBrand(this.$refs.shopList[0].idx);
				// 	})
				// } else {
				// 	this.loadBrand(1);
				// }
			},
			navGateTap(v) {
				if (v.id === '') {
					this.val = 1;
					this.page = 0;
					this.brand = [];
					this.init();
				} else {
					if (v.url.indexOf('#') != -1) {
						this.pageSort = ['brand'];
						this.cid = v.url.split('=')[1];
						this.val = 2;
						this.loadBrand('');
					} else {
						this.$navTo(v.url);
					}
				}
			},
			getTopclass() {
				this.$axios('nhome/topclass', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.topclass = res.data.data;
					}
				})
			},
			getSaleBanner() {
				this.$axios('nhome/saleBanner', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.saleBanner = res.data.data;
					}
				})
			},
			getShopclass() {
				this.$axios('nhome/shopclass', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.shopclass = res.data.data;
					}
				})
			},
			getCurskill() {
				this.$axios('nhome/curskill', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.curskill = res.data.data;
					}
				})
			},
			getMarketing() {
				this.$axios('nhome/marketing', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.marketing = res.data.data;
					}
				})
			},
			getHotsell() {
				this.$axios('nhome/hotsell', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.hotsell = res.data.data;
					}
				})
			},
			loadBrand(e) {
				this.type = e;
				this.cid = this.val === 1 ? '' : this.cid;
				this.page = 1;
				this.$axios('nhome/brand', 'POST', 'shop', {
					cid: this.cid,
					type: this.type,
					page: 1
				}).then(res => {
					if (res.data.code == 200) {
						this.brand = res.data.data;
						this.$nextTick(() => {
							this.isstop = false;
						})
					}
				})
			},
			getBrand() {
				if (this.isstop) return;
				this.isstop = true;
				this.page++;
				this.$axios('nhome/brand', 'POST', 'shop', {
					cid: this.cid,
					type: this.type,
					page: this.page
				}).then(res => {
					if (res.data.code == 200) {
						this.brand = [...this.brand, ...res.data.data];
						this.$nextTick(() => {
							this.isstop = false;
						})
					}
				})
			},
			getFlashSale(v){
				if(v==1){
					this.$axios('home/getCurSkill', 'POST', 'shop').then(res=>{
						if(res.data.code == 200){
							this.flashSaleList = res.data.data.goodsList0;
						}
					})
				}else{
					this.$axios('home/getMonSkill', 'POST', 'shop').then(res=>{
						if(res.data.code == 200){
							this.flashSaleList = res.data.data.goodsList0;
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.v1 {
		color: #303133;
		font-size: 28upx;
		margin: 0;
		padding: 0;
		background: #f8f8f8;
	}

	.set_bg {
		background: $bg-color;
		// padding: 70upx 0 20upx;
		padding: 0;
	}

	.nav_head {
		background: $bg-color;
		// padding: 10upx 20upx 0;
		// position: fixed;
		// top: 0;
		// left: 0;
		width: 100%;
		// height: 74rpx;
		z-index: 500;
	}

	.components {
		margin: 20upx;
	}
	
</style>